import React, { useContext } from 'react';
import { Row, Col, Card, Button, Modal, Space } from 'antd';
import { QuestionCircleOutlined } from '@ant-design/icons';
import { history } from 'umi';
import UpdateExpertsFold from './UpdateExpertsFold';
import '../common/updateStyle.less';

import ScrollBarLayout from '@/components/ScrollBarLayout';
import pageStyles from '@/common/pageLayout.less';
import { ExpertsUpdateContext } from '../common/ExpertsContext';
const { confirm } = Modal;

const UpdateExpertsCardBaseInfo: React.FC<ExpertsUpdateAPI.IUpdateExpertsCard> = ({ title, onSubmit, children }) => {
  const { prefixCls, isView, curRes, expertsInfo, locationProps } = useContext(ExpertsUpdateContext);
  return (
    <>
      <Col span={24} className={`${prefixCls}row-col`}>
        <Card title={title} className={pageStyles['page-view-cardView']} bodyStyle={{ padding: '0px' }} extra={<UpdateExpertsFold />}>
          <Row className={'cardBodyRow'}>
            <Col span={24} className={'cardBodyCol'}>
              <ScrollBarLayout>
                <div className={pageStyles['fromView-stylesPage']} style={{ padding: '5px 48px 5px 0px' }}>
                  {children}
                </div>
              </ScrollBarLayout>
              <div className={'cardBodybtn'}>
                <Space>
                  {!isView &&
                    ((!expertsInfo?.id && curRes?.['/expertInfoController/addExpert']) ||
                      (expertsInfo?.id && curRes?.['/expertInfoController/editExpert'])) && (
                      <Button type="primary" onClick={() => onSubmit()}>
                        保存
                      </Button>
                    )}
                  <Button
                    danger
                    onClick={() => {
                      confirm({
                        title: '关闭',
                        icon: <QuestionCircleOutlined />,
                        content: '确定要关闭当前页吗？',
                        okText: '确定',
                        okType: 'primary',
                        cancelText: '取消',
                        centered: true,
                        onOk() {
                          history.push({
                            pathname: locationProps?.state?.returnPathName,
                            state: {
                              delRouterNameSource: history.location.pathname, //必传,要删除的路由名称
                              returnPathName: locationProps?.state?.returnPathName,
                            },
                          });
                        },
                        onCancel() {},
                      });
                    }}
                  >
                    关闭
                  </Button>
                </Space>
              </div>
            </Col>
          </Row>
        </Card>
      </Col>
    </>
  );
};

export default UpdateExpertsCardBaseInfo;
